<template>
  <div>
    <div>{{ title }}</div>
    <div>{{ count }}</div>
    <div>
      <button @click="start">start</button>
      <button @click="stop">stop</button>
    </div>
  </div>
</template>

<script>
export default {
  props: ["title", "step", "time"],
  data() {
    return {
      count: 0,
      timer: null,
    };
  },
  methods: {
    start() {
      this.stop();
      this.timer = setInterval(() => {
        this.count += this.step;
      }, this.time);
    },
    stop() {
      if (this.timer) {
        clearInterval(this.timer);
      }
    },
  },
  updated() {
    this.start();
  },
  beforeDestroy() {
    this.stop();
  },
};
</script>

<style>
</style>